<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title th:text="${blog.getTitle()}"></title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">
    <script th:src="@{/layui/layui.all.js}"></script>
    <style>
        .nav-underline .nav-link {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: .875rem;
            color: #6c757d;
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<div th:replace="~{common/header::header(activeUrl='blog')}"></div>

<main role="main" class="container" style="padding-left: 0px;padding-right: 0px">

    <div class="row">

        <aside class="col-md-3 blog-sidebar" th:fragment="authorPanel">

            <div class="p-4 my-3 bg-white rounded shadow-sm">

                <div class="mb-0"><!--1-->
                    <p class="text-center">
                        <img th:src="${userInfo.getAvatar()}" style="border-radius: 50%;position: relative"
                             width="128" height="128"></a>
                    </p>

                    <br>
                    <div class="text-center">
                        <span th:text="${userInfo.getNickname()}"></span>
                        <!--<br>-->
                        <!--<small>-->
                        <!--&lt;!&ndash;<span class="badge badge-primary">普通用户</span>&ndash;&gt;-->
                        <!--<span-->
                        <!--th:class="${session.loginUser.getRoleId()==2?'badge badge-warning':'badge badge-success'}"-->
                        <!--th:text="${session.loginUser.getRoleId()==2?'Vip会员':'普通用户'}">-->
                        <!--</span>-->
                        <!--</small>-->
                        <br>
                        <p class="text-center">
                            <small th:text="${#strings.abbreviate(userInfo.getBrief(),25)}"></small>
                        </p>
                        <br>

                        <bg id="artcount" th:fragment="artcount">
                            <!--判断是否登录-->
                            <bg sec:authorize="!isAuthenticated()">
                                <p>
                                    <a type="button" th:href="@{'/chat/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        私信
                                    </a>
                                    <a type="button" th:href="@{'/blog/follow/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        关注
                                    </a>
                                </p>
                            </bg>
                            <bg sec:authorize="isAuthenticated()">
                                <p th:unless="${session.loginUser.getUid()==userInfo.getUid()}">
                                    <a type="button" th:href="@{'/chat/'+${userInfo.getUid()}}" class="btn btn-outline-primary btn-sm followbtn">
                                        私信
                                    </a>
                                    <a type="button" href="javascript:void(0);" id="follow1" style="display: none;"
                                       th:onclick="addFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]])" class="btn btn-outline-primary btn-sm followbtn">
                                        关注
                                    </a>
                                    <a type="button" href="javascript:void(0);" id="follow2" style="display: none;margin-top: 0rem"
                                       th:onclick="cancelFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]])" class="btn btn-outline-primary btn-sm followbtn">
                                        已关注
                                    </a>
                                </p>
                            </bg>

                            <p>
                            <table class="table">
                                <thead id="table-title">
                                <tr>
                                    <th scope="col">文章</th>
                                    <th scope="col">关注</th>
                                    <th scope="col">粉丝</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td th:text="${articleCount}">0</td>
                                    <td th:text="${followCount}">0</td>
                                    <td th:text="${fansCount}">0</td>
                                </tr>
                                </tbody>
                            </table>
                            </p>
                        </bg>

                    </div>
                </div><!--1-->
            </div>

        </aside>


        <div class="col-md-9 blog-main" id="ccc">

            <!--&lt;!&ndash;加载动画&ndash;&gt;-->
            <div id="loadd">
                <div><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"
                        style="font-size: 50px;color: #007bff;"></i></div>
            </div>



            <div class="my-3 p-3 bg-white rounded shadow-sm">


                <div class="blog-post">
                    <h2 class="blog-post-title" th:text="${blog.getTitle()}"></h2>
                    <p class="blog-post-meta">

                        作者:&emsp;
                        <a th:href="@{'/article/'+${blog.getAuthorId()}}" th:text="${blog.getAuthorName()}"></a>&emsp;
                        &emsp;
                        <span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}"></span>
                        &emsp;
                        <span><i class="iconfont icon-liulan" style="font-size: 13px;"></i>
                            [[${blog.getViews()}]]
                        </span>
                        &emsp;
                        <!--如果未登录sc-->
                        <bg sec:authorize="!isAuthenticated()">
                            <a th:href="@{'/blog/follow/'+${blog.getBid()}+'/'+${blog.getAuthorId()}}">
                                <span><i class="iconfont icon-wodeshoucang" style="font-size: 13px;"></i>
                                收藏 [[${collectCount}]]
                                </span>
                            </a>
                        </bg>
                        <!--如果已登录sc-->
                        <bg sec:authorize="isAuthenticated()">
                            <bg id="iscollect" th:fragment="iscollect">

                                <!--添加收藏-->
                                <a href="javascript:void(0);"
                                   th:onclick="toCollect([[${session.loginUser.getUid()}]],[[${blog.getAuthorId()}]],[[${blog.getBid()}]])">
                                    <span th:unless="${isCollect}"><i class="iconfont icon-wodeshoucang" style="font-size: 13px;"></i>
                                        收藏 [[${collectCount}]]
                                    </span>
                                </a>
                                <!--移除收藏-->
                                <a href="javascript:void(0);"
                                   th:onclick="removeCollect([[${session.loginUser.getUid()}]],[[${blog.getBid()}]])">
                                    <span th:if="${isCollect}"><i class="iconfont icon-shoucang1" style="font-size: 14px;"></i>
                                        已收藏 [[${collectCount}]]
                                    </span>
                                </a>

                            </bg>
                        </bg>

                        <!--如果已登录，则如果是自己的文章则可以修改删除-->
                        <bg sec:authorize="isAuthenticated()">

                             <!--自己是自己写的文章可以编辑和删除-->
                            <!--<a th:if="${blog.getAuthorId()==session.loginUser.getUid()}"-->
                            <!--class="float-right" style="color: red"-->
                                <!--href="javascript:void(0);"-->
                               <!--th:onclick="isdel([[${blog.getAuthorId()}]],[[${blog.getBid()}]])">-->
                                <!--<i class="iconfont icon-shanchu1"></i>&nbsp;删除-->
                            <!--</a>-->
                            <a th:if="${session.loginUser.getUid()==blog.getAuthorId()}"
                               class="float-right mr-3"
                               th:href="@{'/blog/editor/'+${session.loginUser.getUid()}+'/'+${blog.getBid()}}">
                                <i class="iconfont icon-bianji"></i>&nbsp;编辑
                            </a>
                        </bg>
                    </p>
                </div>

                <hr style="margin-top: 18px">

                <!--文章主体内容-->
                <div id="doc-content">
                    <textarea th:text="${blog.getContent()}" placeholder="markdown"></textarea>
                </div>

            </div>

            <div class="col-md-12 blog-main" style="margin-top: 20px">
                <hr>
            </div>

        <div class="mt-3 p-3 bg-white rounded">
            <!--如果未登录显示去登录发评论-->
            <div sec:authorize="!isAuthenticated()">
                <div class="my-3 p-3 bg-white rounded shadow-sm">
                    <h6 class="pb-2 mb-0 text-center">快去登录发表评论吧~</h6>
                </div>
            </div>
            <!--如果已登录可以发评论-->
            <div sec:authorize="isAuthenticated()">
                <div class="col-md-12 blog-main" style="margin-top: 20px">
                    <form id="toComment" th:action="@{'/blog/comment/'+${blog.getBid()}+'/'+${blog.getAuthorId()}}"
                          method="post">

                        <input type="hidden" name="bid" th:value="${blog.getBid()}">
                        <input type="hidden" name="uid" th:value="${blog.getAuthorId()}">
                        <input type="hidden" name="userId" th:value="${session.loginUser.getUid()}">
                        <input type="hidden" name="userName" th:value="${session.loginUser.getUsername()}">
                        <input type="hidden" name="userAvatar" th:value="${session.loginUser.getAvatar()}">
                        <input type="hidden" name="topicId" th:value="${blog.getBid()}">
                        <div class="form-group">
                            <textarea name="content" id="pinglun"  required class="form-control"></textarea>
                        </div>
                        <!-- th:onclick="'javascript:loadRefresh('+${blog.getBid()},${blog.getAuthorId()}+')'"-->
                        <button type="button" id="comment-btn" onclick="toComment()"
                                class="btn btn-primary btn-lg btn1 float-right">评论
                        </button>
                    </form>
                </div>
            </div>

            <!---->
            <div id="refalsh" th:fragment="reflash">
                <div th:if="${commentList.size()!=0}" class="col-md-12 blog-main" style="margin-top: 80px">
                    <div class="my-3 p-3 bg-white rounded shadow-sm">
                        <h6 class="border-bottom border-gray pb-2 mb-0">评论列表</h6>

                        <div th:each="comment:${commentList}" class="media text-muted pt-3">
                            <img th:src="${comment.getUserAvatar()}" style="border-radius: 5px;margin-right: 5px "
                                 width="32" height="32">
                            <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                                <strong class="d-block text-gray-dark" th:text="${comment.getUserName()}"></strong>
                                <span th:text="${comment.getContent()}"></span>

                                &emsp;&nbsp;<span th:title="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}"
                                    class="badge badge-light time"></span>
                                <!--&emsp;&nbsp;<span th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd')}" class="badge badge-light"></span>-->

                                <!--删除评论 -->
                                <bg sec:authorize="isAuthenticated()">
                                    <a th:if="${session.loginUser.getUid()==comment.getUserId()}" href="javascript:void(0);"
                                       onclick="delComment(this)">
                                        <input type="text" name="cid" th:value="${comment.getCommentId()}" hidden="hidden">
                                        <span class="badge badge-light float-right u-btn-del">删除</span>
                                    </a>
                                </bg>
                            </p>
                        </div>
                    </div>
                </div>
                <div th:if="${commentList.size()==0}" class="col-md-12 blog-main" style="margin-top: 80px">
                    <div class="my-3 p-3 bg-white rounded shadow-sm">
                        <h6 class="pb-2 mb-0 text-center">emmm... 这里暂时还没有评论....</h6>
                    </div>
                </div>

            </div>
            <!---->
        </div>

        </div>

    </div>


</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top"><i class="iconfont icon-fanhuidingbu1" style="font-size:50px;color: #007bff"></i></a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });
    });

</script>

<script th:src="@{/js/timego.js}"></script>
<script>
    $(function () {
        flashtime();
        // layer.close(loading);
        // layui.layer.closeAll();
        $("#loadd").hide();
    })
</script>
<script th:src="@{/js/comment.js}"></script>
<script type="text/javascript" th:inline="javascript" sec:authorize="isAuthenticated()">
    /*<![CDATA[*/
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
    /*]]>*/

    isCollect([[${session.loginUser.getUid()}]], [[${blog.getBid()}]]);
    isFollow([[${session.loginUser.getUid()}]],[[${userInfo.getUid()}]]);
</script>
</body>
</html>